<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>Modal 对话框</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <p>模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、成功提示、错误提示、询问信息。</p>
                        <div class="anchor">
                            <h2 id="消息提示">消息提示</h2>
                            <a href="#消息提示">#</a>
                        </div>
                        <p>当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。</p>
                        <div class="example">
                            <div class="example-case">
                                <!--<button type="button" class="btn btn-primary" id="alert-1">swal&nbsp;弹&nbsp;窗</button>-->
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-primary" dy8-unit="message" data-content="欢迎使用插件">aler 弹窗 默认标题</button>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-primary" dy8-unit="message" data-content="欢迎使用插件" data-title="欢迎使用">aler 弹窗 自定义标题</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="example-code">
                                <pre><code class="html">
    &lt;div class="col-md-2"&gt;
        &lt;button type="button" class="btn btn-primary" dy8-unit="message" data-content="欢迎使用插件"&gt;aler 弹窗 默认标题&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="col-md-2"&gt;
        &lt;button type="button" class="btn btn-primary" dy8-unit="message" data-content="欢迎使用插件" data-title="欢迎使用"&gt;aler 弹窗 设置标题&lt;/button&gt;
    &lt;/div&gt;
                                </code></pre>
                            </div>
                            <div class="example-desc">在元素上添加属性名 dy8-unit 值为 message 即可调用，消息内容添加属性名 data-content 值为 string，消息标题添加属性名 data-title 值为 string</div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="确认消息">确认消息</h2>
                            <a href="#确认消息">#</a>
                        </div>
                        <p>提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-primary" dy8-unit="message" confirm data-content="是否要使用插件">confirm 弹窗 默认标题</button>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-primary" dy8-unit="message" confirm data-content="是否要使用插件" data-title="欢迎使用">confirm 弹窗 自定义标题</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre><code class="html">
    &lt;div class="col-md-2"&gt;
        &lt;button type="button" class="btn btn-primary" dy8-unit="message" confirm data-content="是否要使用插件"&gt;confirm 弹窗 默认标题&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="col-md-2"&gt;
        &lt;button type="button" class="btn btn-primary" dy8-unit="message" confirm data-content="是否要使用插件" data-title="欢迎使用"&gt;confirm 弹窗 自定义标题&lt;/button&gt;
    &lt;/div&gt;
                                </code></pre>
                            </div>
                            <div class="example-desc">在元素上添加属性名 dy8-unit 值为 message 即可调用，消息内容添加属性名 data-content 值为 string，消息标题添加属性名 data-title 值为 string</div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
<script>
    (function(window, $, undefined){
        var dy8 = layer;
        $('[dy8-unit="message"]').each(function(i, e){
            var $e = $(e),
                defaults = {
                    title: '温馨提示',
                    content: '请输入内容'
                };
            $.extend(defaults,$e.data());

            $e.on('click', function(e){
                if(typeof $e.attr('confirm') != 'undefined'){
                    window.parent.layer.confirm(defaults.content, defaults);
                }else{
                    window.parent.layer.open(defaults);
                }

            });
        });
    })(window, jQuery);

    $('#alert-1').on('click', function(){
        swal({
            title: "您确定要删除这条信息吗",
            text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: "删除",
            closeOnConfirm: false
        }, function () {
            swal("删除成功！", "您已经永久删除了这条信息。", "success");
        });
    });

//    $('#alert-2').on('click', function(){
//        layer.open({
//            title: '欢迎使用',
//            content:'欢迎使用 artDialog 对话框组件'
//        });
//    });
</script>
</body>
</html>